<template>
  <div class="body">
    <div>
      <el-result icon="success" v-if="isSubmit" class="success" title="提交成功" :sub-title="finishMessage">
      </el-result>
      <el-form :class="device == 'mobile' ? 'center-board-form-mobile' : 'center-board-form'
        " :model="element" label-width="100px" ref="addViewRef" v-if="isSubmit == false"
        :label-position="labelPosition">
        <div class="title">{{ title }}</div>
        <p class="content-title">{{ content }}</p>

        <div v-for="(element, index) in list" :key="index">
          <div class="list-group-item-right" v-if="element.type == '601'">
            <div :class="labelPosition == 'top' ? 'index' : 'index-left'" v-if="showIndex">
              {{ index + 1 }}.
            </div>

            <el-form-item :label="element.label" :rules="[
        { required: element.required, message: element.message },
      ]">
              <div v-for="(item, index) in element.items" style="display: flex; width: 100%" :v-if="index == 0"
                :key="index">
                <label style="width: 140px"></label>
                <div v-for="(it, index) in item.list" :key="index">
                  <label>{{ it }}</label>
                </div>
              </div>
              <div v-for="(item, index) in element.items" style="display: flex; width: 100%" :key="index">
                <label style="width: 140px">{{ item.title }}</label>
                <div v-for="(it, index) in item.list" :key="index">
                  <el-radio></el-radio>
                </div>
              </div>
            </el-form-item>
          </div>
          <div class="list-group-item-right"
            v-if="element.type == '10' || element.type == '25' || element.type == '23'">
            <div :class="labelPosition == 'top' ? 'index' : 'index-left'" v-if="showIndex">
              {{ index + 1 }}.
            </div>

            <el-form-item :label="element.label" :ref="index + 'qValue'" :rules="[
        { required: element.required, message: element.message },
      ]">
              <el-input :placeholder="element.placeholder" v-model="element.qValue"></el-input>
            </el-form-item>
          </div>

          <div class="list-group-item-right" v-if="element.type == '20'">
            <div :class="labelPosition == 'top' ? 'index' : 'index-left'" v-if="showIndex">
              {{ index + 1 }}.
            </div>

            <el-form-item :label="element.label" :rules="[
        { required: element.required, message: element.message },
      ]">
              <el-input type="textarea" :placeholder="element.placeholder" :rows="element.line"
                v-model="element.qValue"></el-input>
            </el-form-item>
          </div>

          <div class="list-group-item-right" v-if="element.type == '125'">
            <div :class="labelPosition == 'top' ? 'index' : 'index-left'" v-if="showIndex">
              {{ index + 1 }}.
            </div>

            <el-form-item :label="element.label" :rules="[
        { required: element.required, message: element.message },
      ]">
              <esign class="esignature" ref="esign" :isCrop="isCrop" :lineWidth="lineWidth" :lineColor="lineColor"
                :bgColor="bgColor" :isEdit="isEdit" />

              <el-button type="small" @click="handleReset(index)">清空签名</el-button>
              <el-button type="small" @click="handleGenerate(index)">使用签名</el-button>
            </el-form-item>
          </div>

          <div class="list-group-item-right" v-if="element.type == '30'">
            <div :class="labelPosition == 'top' ? 'index' : 'index-left'" v-if="showIndex">
              {{ index + 1 }}.
            </div>

            <el-form-item :label="element.label" :rules="[
        { required: element.required, message: element.message },
      ]">
              <el-radio-group v-model="element.radioValue">
                <el-radio name="type" :label="item.code" v-for="(item, idx) in element.items" :key="idx">{{ item.title
                  }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>

          <div class="list-group-item-right" v-if="element.type == '50'">
            <div :class="labelPosition == 'top' ? 'index' : 'index-left'" v-if="showIndex">
              {{ index + 1 }}.
            </div>

            <el-form-item :label="element.label" :rules="[
        { required: element.required, message: element.message },
      ]">
              <el-rate v-model="element.qValue" size="large"></el-rate>
            </el-form-item>
          </div>

          <div class="list-group-item-right" v-if="element.type == '27'">
            <div :class="labelPosition == 'top' ? 'index' : 'index-left'" v-if="showIndex">
              {{ index + 1 }}.
            </div>

            <el-form-item :label="element.label" :rules="[
        { required: element.required, message: element.message },
      ]">
              <Editor v-model="contentValue" :init="init" :disabled="disabled" @onClick="onClick" />
            </el-form-item>
          </div>

          <div class="list-group-item-right" v-if="element.type == '60'">
            <div :class="labelPosition == 'top' ? 'index' : 'index-left'" v-if="showIndex">
              {{ index + 1 }}.
            </div>

            <el-form-item :label="element.label" :rules="[
        { required: element.required, message: element.message },
      ]">
              <el-select :placeholder="element.placeholder" size="large" v-model="element.model">
                <el-option v-for="(item, index) in element.items" :key="index" :label="item.title" :value="item.code">
                </el-option>
              </el-select>
            </el-form-item>
          </div>

          <div class="list-group-item-right" v-if="element.type == '70'">
            <div :class="labelPosition == 'top' ? 'index' : 'index-left'" v-if="showIndex">
              {{ index + 1 }}.
            </div>

            <el-form-item :label="element.label" :rules="[
        { required: element.required, message: element.message },
      ]">
              <el-upload :action="'/qt/api/upload/uploadImage'" list-type="picture-card"
                :on-preview="handlePictureCardPreview" :on-remove="handleRemoveFile" :before-remove="beforeRemove"
                :limit="element.limit" :file-list="fileList" accept="image/*" multiple @change="changeUpload(index)"
                :on-success="onSuccess">
                <el-icon>
                  <Plus />
                </el-icon>
              </el-upload>
              <el-dialog v-model="dialogVisible">
                <img style="width: 100%" :src="dialogImageUrl" alt="" />
              </el-dialog>
            </el-form-item>
          </div>
          <div class="list-group-item-right" v-if="element.type == '80'">
            <div :class="labelPosition == 'top' ? 'index' : 'index-left'" v-if="showIndex">
              {{ index + 1 }}.
            </div>

            <el-form-item :label="element.label" :rules="[
        { required: element.required, message: element.message },
      ]">
              <el-upload :limit="element.limit" @change="changeUpload(index)" :on-remove="handleRemoveFile"
                :action="'/qt/api/upload/uploadFile'" :on-success="onSuccessFile" multiple
                :before-remove="beforeRemove">
                <el-button type="primary" plain>上传</el-button>
              </el-upload>
            </el-form-item>
          </div>

          <div class="list-group-item-right" v-if="element.type == '90'">
            <div :class="labelPosition == 'top' ? 'index' : 'index-left'" v-if="showIndex">
              {{ index + 1 }}.
            </div>

            <el-form-item :label="element.label" :rules="[
        { required: element.required, message: element.message },
      ]">
              <el-date-picker :type="element.dateType" v-model="element.qValue" :placeholder="element.placeholder">
              </el-date-picker>
            </el-form-item>
          </div>
          <div class="list-group-item-right" v-if="element.type == '97'">
            <div :class="labelPosition == 'top' ? 'index' : 'index-left'" v-if="showIndex">
              {{ index + 1 }}.
            </div>

            <el-form-item :label="element.label" :rules="[
        { required: element.required, message: element.message },
      ]">
              <el-date-picker type="datetime" value-format="YYYY-MM-DD HH:mm:ss" v-model="element.qValue"
                :placeholder="element.placeholder">
              </el-date-picker>
            </el-form-item>
          </div>
          <div class="list-group-item-right" v-if="element.type == '95'">
            <div :class="labelPosition == 'top' ? 'index' : 'index-left'" v-if="showIndex">
              {{ index + 1 }}.
            </div>

            <el-form-item :label="element.label" :rules="[
        { required: element.required, message: element.message },
      ]">
              <el-time-picker value-format="HH:mm:ss" v-model="element.qValue" :placeholder="element.placeholder">
              </el-time-picker>
            </el-form-item>
          </div>

          <div class="list-group-item-right" v-if="element.type == '100'">
            <div :class="labelPosition == 'top' ? 'index' : 'index-left'" v-if="showIndex">
              {{ index + 1 }}.
            </div>

            <el-form-item :label="element.label" :rules="[
        { required: element.required, message: element.message },
      ]">
              <el-slider v-model="element.qValue" :marks="marks" />
            </el-form-item>
          </div>

          <div class="list-group-item-right" v-if="element.type == '40'">
            <div :class="labelPosition == 'top' ? 'index' : 'index-left'" v-if="showIndex">
              {{ index + 1 }}.
            </div>

            <el-form-item :label="element.label" :rules="[
        { required: element.required, message: element.message },
      ]">
              <el-checkbox-group v-model="element.checkboxList">
                <el-checkbox :label="item.code" v-for="item in element.items" :key="item.code">{{ item.title
                  }}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </div>

          <div style="text-align: center" v-if="index == list.length - 1">
            <el-button type="primary" v-if="device != 'mobile'" @click="save">提交</el-button>
            <div v-if="device == 'mobile'" class="mobile-btn" @click="save">
              提交
            </div>
          </div>
        </div>
      </el-form>
    </div>
  </div>
</template>
<script>
import draggable from "vuedraggable";
import { ElMessage, ElMessageBox } from "element-plus";
import {
  Eleme,
  Delete,
  Plus,
  CopyDocument,
  Cellphone,
  Monitor,
  CircleClose,
} from "@element-plus/icons-vue";
import esign from "../components/esign.vue";
//富文本
//引入tinymce编辑器
import Editor from "@tinymce/tinymce-vue";
//引入方式引入node_modules里的tinymce相关文件文件
import tinymce from "tinymce/tinymce"; //tinymce默认hidden，不引入则不显示编辑器
import "tinymce/themes/silver"; //编辑器主题，不引入则报错
import "tinymce/icons/default"; //引入编辑器图标icon，不引入则不显示对应图标
// 引入编辑器插件
import "tinymce/plugins/advlist"; //高级列表
import "tinymce/plugins/anchor"; //锚点
import "tinymce/plugins/autolink"; //自动链接
import "tinymce/plugins/autoresize"; //编辑器高度自适应,注：plugins里引入此插件时，Init里设置的height将失效
import "tinymce/plugins/autosave"; //自动存稿
import "tinymce/plugins/charmap"; //特殊字符
import "tinymce/plugins/code"; //编辑源码
import "tinymce/plugins/codesample"; //代码示例
import "tinymce/plugins/directionality"; //文字方向
import "tinymce/plugins/emoticons"; //表情
import "tinymce/plugins/fullpage"; //文档属性
import "tinymce/plugins/fullscreen"; //全屏
import "tinymce/plugins/help"; //帮助
import "tinymce/plugins/hr"; //水平分割线
import "tinymce/plugins/image"; //插入编辑图片
import "tinymce/plugins/importcss"; //引入css
import "tinymce/plugins/insertdatetime"; //插入日期时间
import "tinymce/plugins/link"; //超链接
import "tinymce/plugins/lists"; //列表插件
import "tinymce/plugins/media"; //插入编辑媒体
import "tinymce/plugins/nonbreaking"; //插入不间断空格
import "tinymce/plugins/pagebreak"; //插入分页符
import "tinymce/plugins/paste"; //粘贴插件
import "tinymce/plugins/preview"; //预览
import "tinymce/plugins/print"; //打印
import "tinymce/plugins/quickbars"; //快速工具栏
import "tinymce/plugins/save"; //保存
import "tinymce/plugins/searchreplace"; //查找替换
import "tinymce/plugins/tabfocus"; //切入切出，按tab键切出编辑器，切入页面其他输入框中
import "tinymce/plugins/table"; //表格
import "tinymce/plugins/template"; //内容模板
import "tinymce/plugins/textcolor"; //文字颜色
import "tinymce/plugins/textpattern"; //快速排版
import "tinymce/plugins/toc"; //目录生成器
import "tinymce/plugins/visualblocks"; //显示元素范围
import "tinymce/plugins/visualchars"; //显示不可见字符
import "tinymce/plugins/wordcount"; //字数统计
import { httpService } from "@/utils/httpService";

export default {
  name: "custom-clone",
  display: "Custom Clone",
  order: 3,
  mounted() {
    if (this._isMobile()) {
      this.device = "mobile";
    } else {
    }

    this.uuid = this.$route.params.p;
    if (this.$route.query.code) {
      this.wxCode = this.$route.query.code;
    }
    this.queryByUUId();
    tinymce.init({

    });
  },
  watch: {
    value(newValue) {
      this.contentValue = newValue;
    },
    contentValue(newValue) {
      this.$emit("input", newValue);
    },
  },
  components: {
    draggable,
    Cellphone,
    Monitor,
    CircleClose,
    Eleme,
    Delete,
    Plus,
    Editor,
    esign,
    ElMessageBox,
    httpService,
    CopyDocument,
  },
  props: {
    value: {
      type: String,
      default: "",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    plugins: {
      type: [String, Array],
      default:
        "print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount textpattern autosave ",
    },
    toolbar: {
      type: [String, Array],
      default:
        "fullscreen undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | \
                styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \
                table image media charmap emoticons hr pagebreak insertdatetime print preview | code selectall | indent2em lineheight formatpainter axupimgs",
    },
  },
  data() {
    return {
      radio2: 1,
      operateIndex: 1,
      title: "",
      device: "",
      uuid: "",
      content: "",
      tabVaule: "全局设置",
      labelPosition: "top",
      labelPositionIndex: true,
      daterange: "",
      password: "",
      finishMessage: "",
      lineWidth: 6,
      lineColor: "#000000",
      bgColor: "transparent",
      resultImg: "",
      isEdit: true,
      isCrop: true,
      init: {
        language_url: "/tinymce/langs/zh_CN.js", //引入语言包文件
        language: "zh_CN", //语言类型
        skin_url: "/tinymce/skins/ui/oxide", //皮肤：浅色
        // skin_url: '/tinymce/skins/ui/oxide-dark',//皮肤：暗色
        plugins: this.plugins, //插件配置
        toolbar: this.toolbar, //工具栏配置，设为false则隐藏
        // menubar: 'file edit',  //菜单栏配置，设为false则隐藏，不配置则默认显示全部菜单，也可自定义配置--查看 http://tinymce.ax-z.cn/configure/editor-appearance.php --搜索“自定义菜单”
        fontsize_formats:
          "12px 14px 16px 18px 20px 22px 24px 28px 32px 36px 48px 56px 72px", //字体大小
        font_formats:
          "微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;",
        height: 300, //注：引入autoresize插件时，此属性失效
        placeholder: "在这里输入文字",
        branding: false, //tiny技术支持信息是否显示
        resize: false, //编辑器宽高是否可变，false-否,true-高可变，'both'-宽高均可，注意引号
        // statusbar: false,  //最下方的元素路径和字数统计那一栏是否显示
        elementpath: false, //元素路径是否显示

        content_style: "img {max-width:100%;}", //直接自定义可编辑区域的css样式
        // content_css: '/tinycontent.css',  //以css文件方式自定义可编辑区域的css样式，css文件需自己创建并引入
        // images_upload_url: '/demo/upimg.php',  //后端处理程序的url
        // images_upload_base_path: '/demo',  //相对基本路径--关于图片上传建议查看--http://tinymce.ax-z.cn/general/upload-images.php
        // 此处为图片上传处理函数，这个直接用了base64的图片形式上传图片，
        // 如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler
        // images_upload_handler: (blobInfo, success, failure) => {
        //   const img = "data:image/jpeg;base64," + blobInfo.base64();
        //   success(img);
        // },
      },
      contentValue: this.value,
      showIndex: true,
      isEmpty: true,
      form: {},
      list: [],
      indexGlobal: -1,
      questionnaireId: 0,
      addForm: {},
      openid: "",
      isSubmit: false,
      finishMessage: "",
      wxCode: "",
      dialogImageUrl: "",
      dialogVisible: false,
      deleteFileIndex: "",
      marks: {
        0: "0",
        20: "20",
        40: "40",
        60: "60",
        80: "80",
        100: "100",
      },
    };
  },

  methods: {
    beforeRemove(file, fileList) {
      for (let i = 0; i < fileList.length; i++) {
        if (file.uid == fileList[i].uid) {
          this.deleteFileIndex = i;
          break;
        }
      }
    },
    changeUpload(e) {
      this.operateIndex = e;
      console.log(e);
    },

    handleRemoveFile(e,) {
      console.log(e);
      console.log(fileList);
      this.list[this.operateIndex].images.splice(this.deleteFileIndex, 1);
      console.log(this.list[this.operateIndex].images);
    },
    onSuccess(file) {
      console.log(file);
      file.original;
      this.list[this.operateIndex].images.push(file.url);
      console.log(this.list[this.operateIndex].images);
    },
    onSuccessFile(file) {
      console.log(file);
      file.original;
      this.list[this.operateIndex].images.push(file.url);
      console.log(this.list[this.operateIndex].images);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    _isMobile() {
      let flag = navigator.userAgent.match(
        /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
      );
      return flag;
    },
    queryByUUId() {
      httpService(
        "/api/qtQuestionnaire/queryByUUIdForAdd",
        "uuid=" + this.uuid + "&wxCode=" + this.wxCode,
        "post"
      ).then((data) => {
        if (data && data.id != null) {
          this.title = data.title;
          this.finishMessage = data.finishMessage;
          this.content = data.content;
          this.openid = data.openid;
          this.questionnaireId = data.id;
          let upList = data.qtQuestions;
          if (data.showIndex == 1) {
            this.showIndex = true;
          } else {
            this.showIndex = false;
          }
          this.labelPosition = data.labelPosition;
          if (this.labelPosition == "top") {
            this.labelPositionIndex = true;
          } else {
            this.labelPositionIndex = false;
          }
          this.finishMessage = data.finishMessage;
          this.questionnaireId = data.id;
          for (let i = 0; i < upList.length; i++) {
            upList[i].limit = upList[i].limitCount;
            upList[i].sort = i;
            upList[i].imageData = "";
            upList[i].model = "";
            upList[i].propName = "prop" + upList[i].id;
            this.addForm[upList[i].propName] = upList[i].qValue;
            upList[i].qValue = "";
            upList[i].checkboxList = [];
            upList[i].images = [];
            upList[i].openid = this.openid;
            upList[i].radioValue = "radio" + i;
            if (upList[i].required == 1) {
              upList[i].required = true;
            } else {
              upList[i].required = false;
            }
          }
          this.list = upList;
        } else {
          this.$router.push({
            path: "/notEffect",
          });
        }
      });
    },
    keyEnter() {
      //回车事件
    },

    backRouter() {
      this.$router.go(-1);
    },

    // 添加相关的事件，可用的事件参照文档=> https://github.com/tinymce/tinymce-vue => All available events
    // 需要什么事件可以自己增加
    onClick(e) {
      this.$emit("onClick", e, tinymce);
    },
    // 可以添加一些自己的自定义事件，如清空内容
    clear() {
      this.contentValue = "";
    },
    //移动是否可复制
    cloneMain() { },
    //添加一项
    addItemName() {
      let item = {
        title: "选项" + (this.list[this.indexGlobal].items.length + 1),
      };
      this.list[this.indexGlobal].items.push(item);
    },
    //删除单选多选项
    deleteItemName(idx) {
      if (this.list[this.indexGlobal].items.length > 1) {
        this.list[this.indexGlobal].items.splice(idx, 1);
      } else {
        ElMessage.error("最少保留一项");
      }
    },
    //是否必填提示信息
    changeRadio(index) {
      console.log(index);
    },
    handleReset(index) {
      let nowIndex = -1;
      for (let i = 0; i < this.list.length; i++) {
        if (i == index && this.list[i].type == 125) {
          nowIndex = nowIndex + 1;
        }
      }
      console.log(this.$refs.esign[nowIndex]);
      this.$refs.esign[nowIndex].reset();
    },
    handleGenerate(index) {
      let nowIndex = -1;
      for (let i = 0; i < this.list.length; i++) {
        if (i == index && this.list[i].type == 125) {
          nowIndex = nowIndex + 1;
        }
      }
      this.$refs.esign[nowIndex]
        .generate()
        .then((res) => {
          console.log(res);
          this.list[index].imageData = res;
        })
        .catch((err) => {
          alert(err);
        });
    },
    save() {
      console.log("保存");
      console.log(this.list);
      let params = new FormData(); //创建一个form对象,必须是form对象否则后端接受不到数据
      let upList = JSON.parse(JSON.stringify(this.list));
      let valid = false;
      let validMesssage = "";

      for (let i = 0; i < upList.length; i++) {
        upList[i].questionnaireId = this.questionnaireId;
        upList[i].limitCount = upList[i].limit;
        upList[i].sort = i;
        let radioValue = upList[i].radioValue + "";

        if (upList[i].required && upList[i].type == 27) {
          if (this.contentValue == '') {
            validMesssage = "请填写" + upList[i].label;
            valid = false;
            break;
          } else {
            upList[i].qValue = this.contentValue;
            valid = true;
          }
        }
        //图片上传必填提示
        if (upList[i].required && upList[i].type == 70) {
          let images = upList[i].images;
          if (images.length == 0) {
            validMesssage = "请上传第" + (i + 1) + "项的图片";
            valid = false;
            break;
          } else {
            valid = true;
          }
        }
        //文件上传必填提示
        if (upList[i].required && upList[i].type == 80) {
          let images = upList[i].images;
          if (images.length == 0) {
            validMesssage = "请上传第" + (i + 1) + "项的文件";
            valid = false;
            break;
          } else {
            valid = true;
          }
        }
        //下拉必填提示
        if (
          upList[i].required &&
          upList[i].type == 60 &&
          upList[i].model == ""
        ) {
          validMesssage = "请选择" + upList[i].label;
          valid = false;
          break;
        } else {
          valid = true;
        }
        //电子签名
        if (
          upList[i].required &&
          upList[i].type == 125 &&
          upList[i].imageData == ""
        ) {
          validMesssage = "请手写并使用第" + (i + 1) + "项的签名";
          valid = false;
          break;
        } else {
          valid = true;
        }
        //checkbox必选提示
        if (
          upList[i].required &&
          upList[i].type == 40 &&
          upList[i].checkboxList.length == 0
        ) {
          validMesssage = "请选择" + upList[i].label;
          valid = false;
          break;
        } else {
          valid = true;
        }
        //radio必选提示
        if (
          upList[i].required &&
          upList[i].type == 30 &&
          radioValue.indexOf("radio") != -1
        ) {
          validMesssage = "请选择" + upList[i].label;
          valid = false;
          break;
        } else {
          valid = true;
        }

        //输入框必填写提示
        if (
          upList[i].required &&
          (upList[i].type == 10 ||
            upList[i].type == 20 ||
            upList[i].type == 23 ||
            upList[i].type == 25) &&
          upList[i].qValue == ""
        ) {
          validMesssage = "请输入" + upList[i].label;
          valid = false;
          break;
        } else {
          valid = true;
        }
        //滑块评分必填写提示
        if (
          upList[i].required &&
          upList[i].type == 100 &&
          upList[i].qValue == ""
        ) {
          validMesssage = "请选择" + (i + 1) + "项目的分值";
          valid = false;
          break;
        } else {
          valid = true;
        }
        //滑块评分必填写提示
        if (
          upList[i].required &&
          upList[i].type == 50 &&
          upList[i].qValue == ""
        ) {
          validMesssage = "请选择" + (i + 1) + "项目的星级评价";
          valid = false;
          break;
        } else {
          valid = true;
        }

        //日期时间必填写提示
        if (
          upList[i].required &&
          (upList[i].type == 95 || upList[i].type == 97) &&
          upList[i].qValue == ""
        ) {
          validMesssage = "请选择" + (i + 1) + "项目的日期时间";
          valid = false;
          break;
        } else {
          valid = true;
        }
      }

      if (!valid) {
        ElMessage.error(validMesssage);
      } else {
        for (let i = 0; i < upList.length; i++) {
          upList[i].questionnaireId = this.questionnaireId;
          upList[i].limitCount = upList[i].limit;
          let checkboxList = upList[i].checkboxList;
          if (checkboxList.length > 0) {
            upList[i].qValue = JSON.stringify(checkboxList);
          }
          let images = upList[i].images;
          if (images.length > 0) {
            upList[i].qValue = JSON.stringify(images);
          }
          if (upList[i].type == 60) {
            upList[i].radioValue = upList[i].model;
          }
          upList[i].sort = i;
          upList[i].openid = this.openid;
          if (upList[i].required) {
            upList[i].required = 1;
          } else {
            upList[i].required = 0;
          }
        }
        params.append("list", JSON.stringify(upList));
        httpService("/api/qtAnswer/batchAdd", params, "post").then((data) => {
          if (data.code == 200) {
            this.isSubmit = true;
          } else {
            ElMessage.error("提交失败，请重试！");
          }
        });
      }
    },
  },
};
</script>
<style>
.el-form-item__label {
  font-size: 18px;
}

.el-upload-list--picture-card .el-upload-list__item {
  overflow: hidden;
  background-color: #fff;
  /* border: 1px solid #c0ccda; */
  border-radius: 6px;
  box-sizing: border-box;
  width: 140px;
  height: 140px;
  margin: 0 8px 8px 0;
  display: inline-block;
}

.el-input__inner {
  -webkit-appearance: none;
  background-color: #ffffff;
  background-image: none;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  box-sizing: border-box;
  color: #106ecf;
  display: inline-block;
  font-size: inherit;
  height: 40px;
  line-height: 40px;
  outline: none;
  padding: 0 15px;
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  width: 100%;
}

.el-rate__icon {
  font-size: 30px;
}
</style>
<style scoped>
.success {
  padding-top: 120px;
}

.ghost {
  border-top: 4px solid #409EFF;
}

.body {
  background: #f8f8f8;
  min-height: 100vh;
}

.delete-btn {
  margin-top: 10px;
}

.add-btn {
  margin-left: 80px;
}

.index {
  padding-right: 10px;
}

.index-left {
  padding: 5px;
}

.delete {
  float: right;
  cursor: pointer;
  padding: 5px;
  margin: 10px;
}

.title {
  font-size: 1.5em;
  text-align: center;
}

.list-group-item-right {
  cursor: move;
  display: flex;
  padding-left: 20px;
  padding-right: 20px;
  background: white;
}

.top-board {
  background: white;
  text-align: center;
  border-bottom: 1px #dfdfdf solid;
  margin-bottom: 10px;
  position: fixed;
  z-index: 9999;
  width: 100%;
  top: 0;
  color: #333333;
}

.top-board-select {
  background: #409EFF;
  color: white;
}

.top-board .group {
  display: flex;
  margin: 0 auto;
  width: 300px;
  border-right: solid 1px #dfdfdf;
}

.top-board .group div {
  width: 100px;
  padding-top: 20px;
  padding-bottom: 0px;

  cursor: pointer;
  border-left: solid 1px #dfdfdf;
}

.top-board .group div p {
  margin-top: 0px;
}

.mb-3 {
  padding: 10px;
}

.operate {
  font-weight: 600;
  height: 40px;
  line-height: 40px;
  text-align: right;
  font-size: 17px;
  padding-left: 20px;
  white-space: nowrap;
  background: white;
  padding-right: 20px;
}

.logo {
  color: #333333;
  font-weight: 600;
  height: 40px;
  line-height: 40px;
  font-size: 18px;
  padding-left: 10px;
  white-space: nowrap;
}

.logo-bottom {
  border-top: solid #dedede 1px;
  border-right: solid #dedede 1px;
  height: calc(100vh - 60px);
  padding: 10px;
}

.sub-title {
  text-align: right;
  vertical-align: middle;
  float: left;
  font-size: 14px;
  min-width: 100px;
  color: #606266;
  line-height: 40px;
  padding: 0 12px 0 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.list-group-item-left {
  cursor: move;
  width: 50%;
}

.list-group-item-left .components-item {
  display: inline-block;
  width: calc(100% - 8px);
  margin: 4px;
  -webkit-transition: -webkit-transform 0ms !important;
  transition: -webkit-transform 0ms !important;
  transition: transform 0ms !important;
  transition: transform 0ms, -webkit-transform 0ms !important;
}

.item {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
}

.components-body:hover {
  border: 1px solid #409EFF;
  color: #409EFF;
}

.components-body {
  color: #707070;
  font-size: 12px;
  border: 1px solid #eaeaea;
  background-color: #fff;
  padding: 8px 10px;
  font-size: 12px;
  cursor: move;
  text-align: center;
  border-radius: 3px;
}

.components-title {
  font-size: 14px;
  color: #222;
  margin: 10px 2px;
  font-weight: bold;
}

.center-board {
  margin: 0 auto;
  background: #f2f2f2;
}

.center-board-form {
  width: 70%;
  margin: 0 auto;
  padding-top: 30px;
  margin-bottom: 10px;
  padding-bottom: 30px;
  background: white;
}

.center-board-form-mobile {
  width: 100%;
  margin: 0 auto;
  padding-top: 30px;
  margin-bottom: 10px;
  padding-bottom: 30px;
  background: white;
}

.right-content {
  width: calc(100% - 37px);
  height: calc(100vh - 60px);
  padding: 10px;
  overflow: auto;
}

.el-form-item--default {
  --font-size: 14px;
  --el-form-label-font-size: var(--font-size);
  margin-bottom: 18px;
  width: 100%;
}

.esign {
  max-width: 1000px;
  margin: auto;
  padding: 10px;
}

.esigh-btns button {
  color: #fff;
  height: 40px;
  width: 100px;
  font-size: 16px;
  margin-right: 10px;
  outline: none;
  border-radius: 4px;
  background: #f60;
  border: 1px solid transparent;
}

.esigh-btns button:active {
  color: #fff;
  box-shadow: 0px 0px 50px orangered inset;
}

.esigh-result {
  margin-top: 10px;
}

.esigh-result img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid #ececee;
}

.esignature {
  margin: 10px 0;
  border: 1px solid #79bbff;
  border-radius: 4px;
}

.el-tabs__header {
  padding: 0;
  position: relative;
  margin: 0px;
}

h3 {
  padding-left: 10px;
}

.mobile-btn {
  width: 96%;
  margin: 2%;
  margin-top: 20px;
  padding-top: 15px;
  padding-bottom: 15px;
  background: #409EFF;
  font-size: 16px;
  border-radius: 4px;
  color: white;
}

.mobile-btn:hover {
  width: 96%;
  margin: 2%;
  padding-top: 10px;
  padding-bottom: 10px;
  background: #2d52a1;
  font-size: 16px;
  border-radius: 4px;
  color: white;
}

.content-title {
  white-space: pre-line;
  text-align: left;
  padding-left: 20px;
  padding-right: 20px;
  font-size: 16px;
  line-height: 28px;
}
</style>
